@extends('layouts.base')

@section('title', '图片审核')
@section('admin-style')
<link rel="stylesheet" href="{{ asset('assets\element-ui\lib\theme-chalk\index.css') }}">
<!-- import Vue before Element -->
<script src="{{ asset('assets\vue\vue.js')}}"></script>

<!-- import JavaScript -->
<script src="{{ asset('assets\element-ui\lib\index.js') }}"></script>
<script src="{{ asset('assets\axios\axios.min.js') }}"></script>
<style>
	.avatar-uploader .el-upload {
	  border: 1px dashed #d9d9d9;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409EFF;
	}
	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  line-height: 178px;
	  text-align: center;
	}
	.avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
  </style>
@stop


@section('content')

<!-- ============================================================== -->
<!-- Container fluid  -->
<!-- ============================================================== -->
<div class="container-fluid">
	<!-- ============================================================== -->
	<!-- Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->
	<div class="row page-titles">
	    <div class="col-md-5 align-self-center">
	        <h3 class="text-themecolor">图片--列表</h3>
	    </div>
	    <div class="col-md-7 align-self-center">
	        <ol class="breadcrumb">
	            <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
	            <li class="breadcrumb-item">商户管理</li>
	            <li class="breadcrumb-item active">图片审核</li>
	        </ol>
	    </div>
	</div>
	<!-- ============================================================== -->
	<!-- End Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->

	<!-- ============================================================== -->
	<!-- Start Page Content -->
	<!-- ============================================================== -->
	<div class="row">
	    <div class="col-12">
	        <div class="card">
	            <div class="card-body">
	                <h4 class="card-title">图片审核</h4>
	                <h6 class="card-subtitle"></h6>
                	<div class="card-body">
                    </div>        
	                <div class="table-responsive" v-loading="loading">
						<el-row>
							<el-col :span="5" style="padding:10px" v-for="(item,index) in imagesList" :key="index">
							  <el-card :body-style="{ padding: '3px' }">
								<el-image
									style="width: 300px; height: 300px"
									:src="item.goods_image" 
									:preview-src-list="[item.goods_image]">
								</el-image>
								<div style="padding: 14px;">
									<el-button type="text" class="button" @click="changeImage(item)">编辑</el-button>
								  </div>
								</div>
							  </el-card>
							</el-col>
						</el-row>
						<div class="card-body text-center">
							<el-pagination
							  background
							  :page-size="goods_page_size"
							  layout="prev, pager, next"
							  :total="goods_total"
							  :current-page.sync="goods_current_page"
							  prev-text="上一页"
							  next-text="下一页"
							  @current-change="handleGoodsCurrentChange">
							</el-pagination>
						  </div>  
					</div>
					<el-dialog
						title="上传图片"
						:visible.sync="dialogVisible"
						width="30%"
						:before-close="handleClose">
						<el-upload
						class="avatar-uploader"
						:multiple="multiple"
						:action="action"
						:data="tokendata"
						name="goodsImage"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="editImage">确 定</el-button>
						</span>
					</el-dialog>
	            </div>
	        </div>
	    </div>
	</div>
</div>         
                        
@stop

@section('admin-js')
	<script type="text/javascript">		
		Vue.prototype.$axios = axios;
	    Vue.prototype.$dcopy = function($arr){
	        return JSON.parse(JSON.stringify($arr));
	    }
	    new Vue({
	    	el: '#app',
            data(){
            	return {                  
				  loading:true,
				  currentDate: new Date(),
				  imagesList:[],
				  goods_page_size:0,
				  goods_total:0,
				  goods_current_page:0,
				  dialogVisible:false,
				  imageUrl: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
				  action:"{{ route('admin.images.upload') }}",
				  multiple: false,
				  tokendata:{
					_token : "{{ csrf_token() }}"
				  },
				  goods_image:'',
				  domainName:'',
				  goods_id: '',

              }
            },
            created(){
				this.getData();
            },
            mounted(){
                
            },
            methods:{
				getData(){
					var that = this;
					that.loading = true;
					axios.get("{{ route('admin.images.all') }}",{
						params:{
							page:that.goods_current_page
						}
					}).
					then(res => {
						if(res.data.code == 200){
							that.loading = false;
							that.imagesList = res.data.data.data;
							that.goods_total = res.data.data.total;
							that.goods_page_size = res.data.data.per_page;		
						}
					});
				},
				handleGoodsCurrentChange(page){
					this.goods_current_page = page;
					this.getData()
				},
				changeImage(item){
					this.dialogVisible = true;
					this.imageUrl = item.goods_image;
					this.goods_id = item.id;
				}, 
				handleClose(){
					this.dialogVisible = false;
				},
				handleAvatarSuccess(res, file) {
					if(res.code == 200){
						this.imageUrl = res.data.host + res.data.url
						this.goods_image = res.data.url
						this.domainName = res.data.host
					}else if(res.code == 400){
						res.data.forEach(item => {
							this.$message({
								message: item,
								type: 'warning'
							  });
						});
					}
				},
				beforeAvatarUpload(file) {
					const isLt2M = file.size / 1024 / 1024 < 1;
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 1MB!');
					}
					return isLt2M;
				}, 
				editImage(){
					var that = this
					axios.put("{{ route('admin.images.update') }}", {
						'goods_id': that.goods_id,
						'goods_image': that.goods_image, 
						'domainName' : that.domainName,
					}).then(res => {
						if(res.data.code == 200){
							that.$message.success('修改成功');
							that.dialogVisible = false;
							that.getData();
						}else{
							that.$message.error('修改失败');	
						}
					});
				}
            }
	    });
		
	</script>

@stop